<template>
  <view class="pa-16 disFlxJS" @click="emits('click')">
    <view class="activity-cover br-8 mr-12">
      <TImage :src="coverUrl" width="100%" height="100%" />
      <view
        v-if="
          activityStatus === ActivityStatusEnum.REGISTRATION_UNDERWAY ||
          activityStatus === ActivityStatusEnum.START
        "
        class="status-tag fz-14 linh-24 px-8 br-4"
      >
        <text>进行中</text>
      </view>
    </view>
    <view class="activity-info" style="flex: 1">
      <text class="fz-14 ov-2 fw-7 title-color">{{ title }}</text>
      <view class="gray-color">
        <text class="ali-icon icon-shijian fz-16"></text>
        <text class="fz-14 ml-8">
          {{ formatToDateTime(startTime, 'YYYY年MM月DD日 HH:mm') }}
        </text>
      </view>
      <view v-if="addressName" class="gray-color ov-1" @click.stop="openLocation">
        <text class="ali-icon icon-weizhi fz-16"></text>
        <text class="fz-14 ml-8">
          {{ addressName }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { useLocation } from '@/hooks/core/useLocation';
  import { propTypes } from '@/utils/propTypes';
  import TImage from '@/components/TImage/index.vue';
  import type { PropType } from 'vue';
  import { ActivityStatusEnum } from '@/enums/activityStatusEnum';
  import { formatToDateTime } from '@/utils/dateUtil';

  const props = defineProps({
    coverUrl: propTypes.string,
    title: propTypes.string,
    startTime: propTypes.string,
    addressName: propTypes.string,
    address: propTypes.string,
    longitude: propTypes.string,
    latitude: propTypes.string,
    activityStatus: Number as PropType<ActivityStatusEnum>,
  });

  const emits = defineEmits(['click']);

  const { openLocation: uniOpenLocation } = useLocation();

  function openLocation() {
    const { addressName, address, latitude, longitude } = props;
    if (latitude && longitude) {
      uniOpenLocation({
        name: addressName,
        address: address,
        longitude: Number(longitude),
        latitude: Number(latitude),
      });
    }
  }
</script>

<style lang="scss" scoped>
  .activity-cover {
    width: 240rpx;
    height: 180rpx;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    .status-tag {
      position: absolute;
      left: 0;
      top: 0;
      color: #fff;
      background-color: #2878ff;
    }
  }

  .activity-info {
    display: flex;
    min-height: 180rpx;
    flex: 1;
    justify-content: space-around;
    flex-direction: column;
    .ali-icon {
      color: #ccccc8;
    }
  }

  .gray-color {
    color: #999996;
  }

  .title-color {
    color: #333;
  }
</style>
